<template>
<div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-row class="search-input">
                <el-form-item prop="title" label="协议名称：">
                    <el-input v-model="filters.title" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item prop="status" label="协议归属：">
                    <el-select v-model="filters.source" style="width: 200px;" placeholder="全部" clearable>
                        <el-option label="消费者端" value="1"></el-option>
                        <el-option label="商家端" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="status" label="状态：">
                    <el-select v-model="filters.status" style="width: 200px;" placeholder="全部" clearable>
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="停用" value="2"></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="发布时间：" prop="createTime">
                <el-date-picker
                  v-model="filters.createTime"
                  style="width:100%"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>


            </el-row>
            <el-row class="search-button">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('searchFilters')" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" />
                </el-form-item>


            </el-row>

        </el-form>
    </div>

  <div class="table-wrap">
    <jic-table
      :height="350"
      :operationWidth=300
      :tableList="tableList"
      :tableHeaderList="tableHeaderList"
      :totalSize="totalSize"
      :showDetailOperation=true
      :showEditOperation=true
      :showBatchDelete=false
      :showSelection=false
      :showIndex=false
      :showDeleteOperation=true
      :startUsing=true
      :blockUp=true
      @findPage="findPage"
      @handleDelete="handleDelete"
      @handleEdit="handleEdit"
      @handleDetail="handleDetail"
      @handleProhibitStatus="handleProhibitStatus"
      @handleStartorDisable="handleStartorDisable"
      @handleSizeChange="handleSizeChange"
      @handlePageChange="handlePageChange"
      ref="jicTable"
    ></jic-table>
  </div>
    <!--新增编辑界面-->
    <el-dialog :title="operation" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
        <el-form :model="searchFilters" label-width="100px" :rules="dataFormRules" ref="searchFilters" :size="size" label-position="right" >
            <el-row class="searchDialog-input">

                <el-form-item label="协议名称：" prop="title">
                    <el-input  v-model="searchFilters.title" auto-complete="off" maxlength="300" placeholder="请输入" :disabled="this.disabled"></el-input>
                </el-form-item>
              <el-form-item label="协议类型：" prop="type">
                <el-select v-model="searchFilters.type" placeholder="请选择" style="width: 100%" :disabled="this.disabled">
                  <el-option label="入驻协议" :value="1"></el-option>
                  <el-option label="隐私协议" :value="2"></el-option>
                </el-select>
              </el-form-item>

                <el-form-item label="协议归属：" prop="source" >
                  <el-select v-model="searchFilters.source" placeholder="请选择" style="width: 100%" :disabled="this.disabled">
                    <el-option label="消费者端" :value="1"></el-option>
                    <el-option label="商家端" :value="2"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="协议内容：" prop="content">
                    <quill-editor v-model="searchFilters.content" ref="myQuillEditor" style="height: 300px;" :options="editorOption" :disabled="this.disabled"></quill-editor>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="padding-top:60px;">
            <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitForm"  :loading="editLoading" v-show="isSumbitShow">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>

</div>
</template>

<script>

import PopupTreeInput from "@/components/PopupTreeInput";
import jicTable from '@/components/jicComponentGallery/jicTable';
import KtButton from "@/views/Core/KtButton";
import {quillEditor} from "vue-quill-editor";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {format} from "@/utils/datetime";
import {exportExcel} from "@/utils/excel";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
    components: {
        PopupTreeInput,
        KtButton,
        TableColumnFilterDialog,
        quillEditor,
        jicTable
    },
    data() {
        return {
            size: "small",
            filters: {
              id:null,
              title:null,
              source:null,
              status:null,
              createTime:null,
            },
          tableHeaderList: [
              {prop: "id", label: "序号", minWidth: 50},
              {prop: "title", label: "协议名称", minWidth: 120},
              {prop: "type", label: "协议类型", minWidth: 180, formatter: this.protocolType},
              {prop: "source", label: "协议归属", minWidth: 180,formatter: this.AgreementOfBelonging},
              {prop: "status", label: "状态", minWidth: 120, formatter: this.showStatusType},
              {prop: "createTime", label: "发布时间", minWidth: 120}
            ],
            filterColumns: [],
            tableList:[],
            totalSize:0,//总记录数：返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            },
            pageResult: {},
            disabled: false,
            options: {},
            editorOption: {},
            operation: null, // true:新增, false:编辑
            operations: null, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            xiangqing: false, // 新增编辑界面是否显示
            editLoading: false,
            isSumbitShow: false,
            dataFormRules: {
              title: [{required: true, message: "请输入标题", trigger: "blur"}],
              type: [{required: true, message: "请选择协议类型", trigger: "blur"}],
              source: [{required: true, message: "请选择协议归属", trigger: "blur"}],
              content: [{required: true, message: "请输入协议内容", trigger: "blur"}],
            },
            //选中ID Array
            idArray: [],
            // 新增编辑界面数据
            dataForm: {
              title:null,
              type:null,
              source:null,
              content:null,
            },
          //=====搜索表单对应的数据对象初始化=====
          xiangqingye: {
            title:null,
            type:null,
            source:null,
            content:null,
          },
          //=====搜索表单对应的数据对象初始化=====
          searchFilters: {
            title:null,
            protocolCode:null,
            type:null,
            source:null,
            content:null,
            status:null,
            deptId:null,
            createTime:null,
            creator:null,
            creatorName:null,
            updateTime:null,
            updater:null,
            updaterName:null,
            deleteFlag:null,
          },
        };
    },
    methods: {
        // 获取分页数据
        findPage: function (data) {
          // debugger
            let this_ = this;
            if (this_.filters == undefined || this_.filters == null) {
                this_.filters = {};
            }
            this_.filters.start = this.pageRequest.pageNum;
            this_.filters.limit = this.pageRequest.pageSize;

            this.utils.request.findSysProtocolPage(this_.filters, function (res) {
              if (res.code === "0000") {
                this_.tableList = res.data.list;
                this_.totalSize = Number(res.data.total);
              } else {
                this_.tableList = [];
                this_.totalSize = 0;
              }
            });


        },

        //数据勾选
        selectionChange(data) {
            console.log(data);
            this.idArray = data.selections;
        },
        //列表状态处理
        showStatusType(row, column, cellValue, index) {
            if (row.status == 1) {
                return "启用";
            } else if (row.status == 2) {
                return "停用";
            }
        },
        //列表协议类型处理
      protocolType(row, column, cellValue, index) {
            if (row.type == 1) {
                return "入驻协议";
            } else if (row.type == 2) {
                return "隐私协议";
            }
        },
      //列表协议归属处理
      AgreementOfBelonging(row, column, cellValue, index) {
            if (row.source == 1) {
                return "消费者端";
            } else if (row.source == 2) {
                return "商家端";
            }
        },

      // 10.删除按钮：删除选中的记录
      handleDelete(data) {
        var params = {};
        params.id = data.params[0].id;
        var this_ = this;
        this.utils.request.deleteSysProtocol(params, function (res) {
          if (res.code == "0000") {
            this_.$message({
              message: "操作成功",
              type: "success"
            });
            this_.findPage(null);
          } else {
            this_.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      },
      // 6.每页记录数发生变化
      handleSizeChange(params) {
        this.pageRequest.pageSize = params.size;
      },

      // 7.请求页数发生变化
      handlePageChange(params) {
        this.pageRequest.pageNum = params.number;
        this.findPage();
      },
        // 显示新增界面
        handleAdd: function () {

            this.disabled = false;
            this.dialogVisible = true;
            this.isSumbitShow = true;
            this.operation = "新增";
            this.searchFilters = {};

        },

        // 显示编辑界面
        handleEdit: function (params) {
            this.disabled = false;
            this.isSumbitShow = true;
            console.log(params);
            this.dialogVisible = true;
            this.operation = "编辑";
            this.searchFilters = Object.assign({}, params.row);
        },

        // 显示详情界面
      handleDetail: function (params) {
            this.disabled = true;
            this.isSumbitShow = false;
            this.dialogVisible = true;
            this.operation = "详情";
            this.searchFilters = Object.assign({}, params.row);
        },
      //2.请求列表数据
      getDetail() {
        let this_ = this;
        if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != '' && this.$route.query.id != 'null' && this.$route.query.id != "undefined") {
          let params = {};
          params.id = this.$route.query.id;
          this.utils.request.getSysProtocolDetail(params, function (res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({message: "操作失败, " + data.msg, type: "error"});
            }
          });
        }
      },
        // 编辑
        submitForm: function () {

            this.$refs.searchFilters.validate(valid => {
                if (valid) {
                    let this_ = this;
                    this.editLoading = true;
                    let params = Object.assign({}, this.searchFilters);
                    this.utils.request.saveSysProtocol(params, function (data) {
                        if (data.code == "0000") {
                            this_.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            this_.dialogVisible = false;
                            this_.$refs["searchFilters"].resetFields();
                        } else {
                            this_.$message({
                                message: "操作失败, " + data.msg,
                                type: "error"
                            });
                        }
                        this_.findPage();
                        this_.dialogVisible = false;
                        this_.operation = null;
                        this_.editLoading = false;
                    });
                }
            });
        },
        //启用停用
        editStatus: function () {
            if (this.idArray.length != 1) {
                this.$message({
                    message: "请选择一条数据进行处理, ",
                    type: "error",
                    center: true,
                    offset: 250,
                    duration: 1000
                });
            } else {
                let params = {};
                params.id = this.idArray[0].id;
                if (this.idArray[0].status == '1') {
                    params.status = '2';
                } else if (this.idArray[0].status == '2') {
                    params.status = '1';
                }
                var this_ = this;
                this.utils.request.editSysNotice(params, function (res) {
                    this_.$message({
                        message: '操作成功',
                        type: 'success',
                        center: true,
                        offset: 250,
                        duration: 1000
                    });
                    this_.findPage(null);
                });
            }
        },
        // 时间格式化
        dateFormat: function (row, column, cellValue, index) {
            return format(row[column.property]);
        },
      //重置按钮
        resetForm() {
          let this_=this;
          this_.filters = {};
          this_.findPage();
        },
      // 启用方法
      handleStartorDisable(row) {
        this.$confirm("确认启用选中记录吗？一旦启用,将替换相同属性下的协议", "提示", {
          type: "warning"
        }).then(() => {
          const params = {};
          params.id = row.row.id;
          params.pageType = 1;
          const this_ = this;
          this.utils.request.updateQ(params, res => {
            this_.findPage();
            if (res.code === "0000") {
              this_.$message({message: "操作成功", type: "success"});
              this_.findPage(null);
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        });
      },
      // 停用方法
      handleProhibitStatus(data) {
        this.utils.request.updateJ({id: data.row.id}, res => {
            this.findPage();
          /*if (res.data) {
            this.$message({message: '停用成功', type: 'success'});
          } else {
            this.$message({message: '停用失败', type: 'warning'});
          }*/
        });
      },
    },

    mounted() {
        this.findPage();

    }
};
</script>

<style lang='scss' scoped>
</style>
